<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动菜单</title>
    <script>
        function loadCity() {
            let province = document.getElementById("province");
            let city = document.getElementById("city");

            // 定义一个数组
            let arr = new Array();
            // 为数组中的元素赋值
            // 每一个元素对应一个省份的所有城市列表
            arr[0] = [new Option("--城市--", "-1")];
            arr[1] = [new Option("南京", "1"), new Option("苏州", "2"), new Option("泰州", "3"), new Option("徐州", "4"), new Option("常州", "5"), new Option("无锡", "6"), new Option("扬州", "7")]
            arr[2] = [new Option("杭州", "1"), new Option("宁波", "2"), new Option("绍兴", "3"), new Option("温州", "4"), new Option("金华", "5")]
            arr[3] = [new Option("合肥", "1"), new Option("滁州", "2"), new Option("马鞍山", "3"), new Option("六安", "4")]

            // 获取用户所选择的省份选项的索引号
            let index = province.selectedIndex;

            // 加载之前,清除原有的数据,保留第一个原始数据
            city.length = 1;

            // 该索引号与数组的索引号是一致的
            // 取出对应数组元素,将其加载到城市列表中
            for (let i = 0; i < arr[index].length; i++) {
                city[city.length] = arr[index][i];
            }
        }
    </script>
</head>
<body>
<select id="province" onchange="loadCity()">
    <option value="-1">--省份--</option>
    <option value="1">江苏省</option>
    <option value="2">浙江省</option>
    <option value="3">安徽省</option>
</select>
<!--
    初始情况下,城市下拉列中没有具体选项
    当用户选择了上面的省份下拉列之后,会根据所选择的选项生成城市
    当选择江苏时
        城市为:南京、苏州、泰州、徐州、常州、无锡、扬州
    当选择浙江时
        城市为:杭州、宁波、绍兴、温州、金华
    当选择安徽时
        城市为:合肥、滁州、马鞍山、六安
-->
<select id="city">
    <option value="-1">--城市--</option>
</select>
</body>
</html>